<!doctype html>
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../node_modules/sweetalert/dist/sweetalert.css">
    <link rel="stylesheet" href="../node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="/src/css/app.less">
    <link rel="stylesheet" href="/src/css/event.less">
</head>
<body>
<div class="main disNone" v-show="event.cover_img">
    <div class="box box-sign" v-bind:style="{'background-image': 'url('+formBg+')'}">
        <div class="close" v-on:click="cleanData()"><img src="/src/img/slogan/icon-close.png" alt=""></div>
        <div class="title"><img src="/src/img/slogan/tit-text.png" alt=""></div>
        <div id="form">
            <div class="errorTip">{{errorTip}}</div>
            <div v-for="i in field">
                <!--单行输入框-->
                <input type="text" :id="i.name" class="input" v-model="val[i.name]" :placeholder="i.title" v-if="i.type=='text' && i.name != 'phone'">
                <!--多行输入框-->
                <textarea class="textarea" :id="i.name" v-model="val[i.name]" :placeholder="i.title" v-if="i.type=='textarea'"></textarea>
                <!--手机号码框-->
                <input type="number" :id="i.name" class="input" v-model="val[i.name]" :placeholder="i.title" v-if="i.name == 'phone'">
                <!--下拉框-->
                <div class="select" v-if="(i.isCustom && i.type=='select') || i.name=='sex'">
                    <input type="text" class="input" v-model="val[i.name]" readonly="" :placeholder="i.title">
                    <select v-model="val[i.name]" :id="i.name">
                        <option disabled>请选择</option>
                        <option v-for="s in i.val" :value="s">{{s}}</option>
                    </select>
                </div>
                <!--上传图片-->
                <div class="upload" v-if="i.name=='pic'">
                    <button class="uploadbtn">上传图片</button>
                    <input type="file" class="uploadFile" :id="i.name">
                    <div id="view" v-bind:style="{'background-image': 'url('+upload.img+')'}"/></div>
                    <div class="clipArea">
                        <div class="buttons">
                            <p v-if="uploadlock">上传中请稍后……</p>
                            <button id="clipBtn">截取</button>
                            <button id="cancel" v-on:click="cancelCut()">取消</button>
                        </div>
                    </div>
                    <input type="hidden" v-model="val[i.name]">
                </div>
            </div>
            <div class="btns">
                <button class="btn" v-on:click="submit()" :class="{'loading':isLock}">{{isLock?'请稍后……':'提交'}}</button>
            </div>
        </div>
    </div>

    <div class="box box-success">
        <div class="icon"><img src="/src/img/slogan/icon-suces.png" alt=""></div>
        <div class="title">提交成功</div>
        <div class="cont">
            请关注“<a href="https://mp.weixin.qq.com/s?__biz=MzIyMTkzMzc5Mg==&mid=2247483651&idx=1&sn=b012c44ec80815a9046c104b67cf30f4&chksm=e834788cdf43f19af447aaf6af7aa9fec6f488356bd3a2b80f960a5adb44e7de7e580ef0ed51&mpshare=1&scene=1&srcid=081826MoJsjVMVhSPLqCcows&key=4b95006583a3cb389c91df87070540ef86827cd371c99e3ef18a3b777c30e15a2063b87ed84f91511577eff1cba89dff4cbc2c62449e8c9c4eb35423999d5dc1234b65ca96df2837a563a9a6fe3e1c0b&ascene=0&uin=MTA3MDM1NzA2MQ%3D%3D&devicetype=iMac+MacBookPro13%2C1+OSX+OSX+10.12.5+build(16F73)&version=12020810&nettype=WIFI&fontScale=100&pass_ticket=WplYCOk29nokLNwmoJrSpLJpSik6rq24RT6%2B1Jtg1Imfo9QLPpDqmUgr0MXcwNrI">一小群</a>”公众号，获取最新消息
        </div>
        <div class="link">
            <span>3</span> 秒后自动进入群组<!-- - <a></a>-->
        </div>
    </div>
</div>

<script src="/src/lib/flexible.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/sweetalert/dist/sweetalert-dev.js"></script>
<script src="/src/lib/jquery.cookie.js"></script>
<script src="/src/lib/hammer.js"></script>
<script src="/src/lib/iscroll-zoom.js"></script>
<script src="/src/lib/lrz.all.bundle.js"></script>
<script src="../node_modules/photoclip/dist/Photoclip.js"></script>
<script src="/src/js/config.js"></script>
<script src="/src/js/event.js"></script>
<script>
    var timeout;

    var app = new Vue({
        el: '.main',
        data: {
            isLock: false,
            uploadlock: false,
            upload: {
                url: '',
                img: '',
            },
            formBg:'',
            event: {
                cover_img : '',
                cover_desc: 'lalalll',
            },
            field: {},
            val: {},
            errorTip:'',
        },
        mounted: function () {
            this.getEventInfo();
            this.getForm();
        },
        methods : {
            //获取活动信息
            getEventInfo: function(){
                var _this = this;
                $.ajax({
                    url : $config.kcishost+'/m/Activity/index',
                    type : 'get',
                    data : {
                        id:$config.GetQueryString('eid'),
                    },
                    success : function (json) {
                        // console.log(json);
                        // var json = JSON.parse(json);
                        _this.event = json.data;
                        document.title = json.data.title;
                        var link;
                        if(location.hostname == 'h5.yixiaoqun.com'){
                            link = "http://h5.yixiaoqun.com/event.html?eid="+$config.GetQueryString('eid');
                        }else{
                            link = "http://h5.test.yixiaoqun.com/event.html?eid="+$config.GetQueryString('eid');
                        }

                        $config.wxShare({
                            url : link,
                            title : json.data.title,
                            cont : json.data.desc,
                            logo : json.data.logo_img,
                        })
                        $('.disNone').removeClass('disNone');
                    }
                })
            },
            //获取表单结构
            getForm: function(){
                var _this = this;
                $.ajax({
                    url : $config.kcishost+'/m/Activity/field',
                    type : 'get',
                    data : {
                        id: $config.GetQueryString('eid'),
                    },
                    success : function (json) {
                        // var json = JSON.parse(json);
                        _this.formBg = json.data.bg_img;

                        var field = json.data.fields;
                        var arr = [];
                        var j = 0;
                        var reg = /field_(\d)/;
                        for(var i in field){
                            var name = field[i].name
                            console.log(name);
                            if(name == 'pic'){
                                arr.push(field[i]);
                            }else if(name == 'remark'){
                                arr.push(field[i]);
                            }else{
                                if(name.match(reg)){
                                    field[i].isCustom = true;
                                }else if(name == 'sex'){
                                    field[i].val = ['男','女'];
                                }
                                if(!arr[j]){
                                    arr[j] = field[i];
                                }else{
                                    arr.splice(j,0,field[i]);
                                }
                                j++;
                            }
                        }
                        _this.field = arr;
                        for(var i in _this.field){
                            Vue.set(_this.val,_this.field[i].name,'');
                        }

                        //初始化上传组件
                        setTimeout(function(){
                            _this.uploading();
                        },500);
                        console.log(_this.val);

                        $('.disNone').removeClass('disNone');
                    }
                })
            },
            //初始化上传组件
            uploading: function(){
                var _this = this;
                $.ajax({
                    url : $config.host+'/Attach/assignUppicUrl',
                    type : 'get',
                    data : {
                        request_host:'h5.yixiaoqun.com',
                    },
                    dataType: 'jsonp',
                    success : function (json) {
                        _this.upload.url = json.data.url;
                    }
                })

                new PhotoClip('.clipArea', {
                    size: [300,200],
                    outputSize: 580,
                    file: '.uploadFile',
                    ok: '#clipBtn',
                    outputSize: ['',200] ,
                    loadStart: function() {
                        $('.clipArea').fadeIn();
                        console.log('开始读取照片');
                    },
                    loadComplete: function() {
                        console.log('照片读取完成');
                    },
                    done: function(dataURL) {
                        _this.uploadImg(dataURL);
                    },
                    fail: function(msg) {
                        console.log(msg);
                    }
                });
            },
            //取消裁切
            cancelCut: function(){
                $('.clipArea').fadeOut();
            },
            //上传图片
            uploadImg: function(url){
                var _this = this;
                var blob = $config.dataURLtoBlob(url);
                var fd = new FormData();
                fd.append("the_file", blob, 'image.png');

                _this.uploadlock = true;
                $.ajax({
                    type: 'POST',
                    url: _this.upload.url,
                    data: fd,
                    processData: false, // 不会将 data 参数序列化字符串
                    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
                    dataType: 'json',
                }).success(function (res) {
                    _this.upload.img = res.url;
                    _this.val.pic = res.url;
                    _this.uploadlock = false;
                    $('.clipArea').fadeOut();
                }).error(function (err) {
                    swal({title: '图片传不上，再来一次吧', type: "warning"});
                    _this.uploadlock = false;
                    $('.clipArea').fadeOut();
                });
            },
            cleanData: function(){
                for(var i in this.val){
                    this.val[i] = '';
                }
            },
            //发布
            submit: function(){
                // 提交
                var _this = this;
                clearTimeout(timeout);
                for (var i in _this.val){
                    if(!_this.val[i] && i != 'remark' && i!= 'pic'){
                        console.log(_this.val);
                        $('#'+i).focus();
                        _this.errorTip = '该信息不能为空';
                        $('.errorTip').css('top',0);
                        timeout = setTimeout(function(){
                            $('.errorTip').css('top','-90px');
                        },2000);
                        return;
                    }else if(!_this.val[i] && i == 'pic'){
                        $('#'+i).focus();
                        _this.errorTip = '请上传图片';
                        $('.errorTip').css('top',0);
                        timeout = setTimeout(function(){
                            $('.errorTip').css('top','-90px');
                        },2000);
                        return;
                    }else if(i == 'phone'){
                        if(!(/^1[34578]\d{9}$/.test(_this.val[i]))){
                            $('#'+i).focus();
                            _this.errorTip = '手机号码格式错误';
                            $('.errorTip').css('top',0);
                            timeout = setTimeout(function(){
                                $('.errorTip').css('top','-90px');
                            },2000);
                            return;
                        }
                    }
                }

                if(_this.isLock) return;
                _this.isLock = true;

                var sex;
                if(_this.val.sex == '男'){
                    sex = 1;
                }else if(_this.val.sex == '女'){
                    sex = 2;
                }

                var postData = _this.val;
                if(postData.sex){
                    postData.sex = sex;
                }
                postData.id = $config.GetQueryString('eid');
                postData.yxq_wx_token = $.cookie('yxq_wx_token');
                postData.wx_name = decodeURI($.cookie('yxq_wx_nickname'));

                $.ajax({
                    url : $config.kcishost+'/m/Activity/apply',
                    type : 'post',
                    data : postData,
                    success : function (json) {
                        // var json = JSON.parse(json);
                        if(json.errcode == 0){

                            _this.totalSum();  //统计参与人数

                            var href = $config.host+'/#/group/'+json.data.groupId;

                            $('.box-success').show();
                            // $('.box-success .link a').attr('href',href);
                            var num = 3,
                                time = setInterval(function () {
                                    num--;
                                    if(num!=0){
                                        $('.box-success .link span').text(num);
                                    }else{
                                        clearInterval(time);
                                        location.href = href;
                                    }
                                },1000)
                        }else{
                            swal({title: json.errmsg, type: "warning"});
                        }
                        setTimeout(function () {
                            _this.isLock = false;
                        },1000)
                    }
                })
            },
            //统计人数
            totalSum: function(){
                $.ajax({
                    url : $config.kcishost+'/m/Activity/proxyYxqH5',
                    type : 'post',
                    data : {
                        api: 'sum',
                        yxq_wx_token: $.cookie('yxq_wx_token'),
                        id: $config.GetQueryString('eid'),
                    },
                    success : function (json) {

                    }
                })
            },
            //统计排行
            totalRank: function(){
                $.ajax({
                    url : $config.kcishost+'/m/Activity/proxyYxqH5',
                    type : 'post',
                    data : {
                        api: 'rank',
                        yxq_wx_token: $.cookie('yxq_wx_token'),
                        id: $config.GetQueryString('eid'),
                    },
                    success : function (json) {

                    }
                })
            }
        }
    })
</script>
</body>
</html>